<template>
  <div>
    <div class="layui-tab layui-tab-brief" lay-filter="user" id="LAY_msg" style="margin-top: 15px;">
      <button class="layui-btn layui-btn-danger" id="LAY_delallmsg"
        @click="removeAll"
      >
        清空全部消息
      </button>
      <div  id="LAY_minemsg" style="margin-top: 10px;">

        <div class="fly-none" v-show="total == 0">您暂时没有最新消息</div>

        <ul class="mine-msg">

          <li data-id="123"
              v-for="(item, index) of list"
              :key="item.id"
          >
            <blockquote class="layui-elem-quote">
              <router-link to="">
                <cite v-text="item.from_user_name"></cite>
              </router-link>
              {{item.content}}
              <router-link :to="/detail/ + item.topic_id">
                <cite v-text="item.topic"></cite>
              </router-link>
            </blockquote>
            <p><span v-text="item.created_at"></span>
              <a href="javascript:;" class="layui-btn layui-btn-small fly-delete"
                @click="replyUser(index, item.id, item.from_user_name, item.topic_id, item.from_user_id)"
              >
                回复
              </a>
              <a href="javascript:;" class="layui-btn layui-btn-small layui-btn-danger fly-delete"
                @click="removeOne(index, item.id)"
              >
                清除
              </a>
            </p>
          </li>

        </ul>
      </div>
    </div>
  </div>

</template>

<script>
import {myMessage, isRead} from "@/api/user";
import {reply} from "@/api/detail";
import { MessageBox } from 'element-ui';
import {message} from "@/element/message";

export default {
  name: 'Password',
  data () {
    return {
      list: [],
      total: 0,
      user: {},
      page: 1,
      per_page: 10
    }
  },
  methods: {
    getMyMessage: function () {
      myMessage(this.user.id, this.page, this.per_page).then(this.getMyMessageSucc)
    },
    getMyMessageSucc: function (res) {
      res = res.data.data
      this.list = res.list
      this.total = res.total
    },
    replyUser: function (index, messageId, userName, topicId, toUser) {
      MessageBox.prompt('请输入回复内容', '@' + userName, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        reply(topicId, this.user.id, toUser, value)
        this.list.splice(index, 1)
        message('提交成功')
        isRead(messageId)

      })
    },
    removeOne: function (index, messageId) {
      this.list.splice(index, 1)
      isRead(messageId)
      message('清除成功')
    },
    removeAll: function () {
      this.list = []
      isRead()
      message('清除成功')
    }
  },
  mounted () {
    if (localStorage.getItem('user')) {
      this.user = JSON.parse(localStorage.getItem('user'))
    }
    this.getMyMessage()
  }
}
</script>